<style lang="less" scoped>
@import "../../../base.less";
@import "../../../assets/iconfont/iconfont.css";
.header-nav {
  display: flex;
  align-items: center;
  height: 64px;
  color: @title-color;
  padding: 0 @padding;

  .bread-crumb {
    flex: 1 1 auto;
    margin-left: 16px;
    text-align: left;
    font-size: 1.25rem;
  }

  .config-wrapper {
    line-height: 32px;
    text-align: left;
    display: flex;
    align-items: center;

    a {
      i {
        font-size: 1.25rem;
      }
    }

    .dark-a {
      margin-right: 16px;
    }

    .avator-wrapper {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #619fe7;
    }

    .shake {
      animation: leftshake .4s ease-in-out forwards;
    }

    @keyframes leftshake {
      25% {
        transform: translateY(6px);
      }
      50% {
        transform: translateY(-4px);
      }
      75% {
        transform: translateY(2px);
      }
      100% {
        transform: translateY(0);
      }
    }

    .help {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 8px;
      padding-left: 8px;
    }
  }

  li {
    text-align: center;
  }
}

.setting-wrapper {
  header {
    display: flex;
    align-items: center;

    span {
      font-size: .875rem;
      margin-left: 4px;
      font-weight: bold;
    }
  }

  .setting-label {
    font-size: .8125rem;
    margin: 4px 0;
  }

}
</style>

<template>
  <div class="header-nav">
    <Icon type="ios-menu-outline" style="cursor: pointer;" size="32" :style="styles" @click="toggleShrink"/>
    <div class="bread-crumb">
      <Breadcrumb>
        <BreadcrumbItem
          v-for="(path, index) in currentPath"
          :key="index"
          style="font-size: .875rem;"
        >{{ path }}
        </BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="config-wrapper clear-float">
      <a class="dark-a" href="http://udp6hxwiki.devops.com" target="_blank" tip="开发文档" rel="noopenner noreferrer">
        <Tooltip content="开发文档" placement="bottom">
<!--          <Icon type="ios-bulb-outline" :size="20"></Icon>-->
          <Icon type="ios-help-circle-outline" :size="20"></Icon>
        </Tooltip>
      </a>
      <a class="dark-a" href="javascript:void(0)" @click="toggleFullScreen">
        <Tooltip :content="isFullScreen ? '退出全屏' : '全屏'" placement="bottom">
          <Icon custom="iconfont  icon-FullScreen" v-if="!isFullScreen" :size="23"/>
          <Icon custom="iconfont  icon-ExitFullScreen" v-if="isFullScreen" :size="23"/>
        </Tooltip>
      </a>
      <Dropdown @on-click="setTheme" style="margin-left:3px">
        <a href="javascript:void(0)">
          主题
          <Icon type="md-arrow-dropdown"/>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem v-for='item in themeGroup' :key='item.id' :name="item.id">
            <Icon v-if='item.id==theme' style="margin-left:-12%" color='green' type="md-checkmark"/>
            <span>{{ item.name }}</span>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown class="avator-wrapper" style="margin-left: 20px" @on-click="handleUserAction">
        <a href="javascript:void(0)">
          {{ userName }}
          <Icon type="md-arrow-dropdown"/>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem name="userCenter">{{'个人中心'}}</DropdownItem>
          <DropdownItem name="logout">{{'退出登录'}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <img class="avatar" :src="avatorUrl" alt="">
      <img @click="to_keshihua" :src="homeUrl" style="
                    height: 33px;
                    margin-left: 8px;
                    cursor: pointer;
                    width: 33px;
                    border: 0;
                    background-color: rgb(0,86,181);
                    border-radius: 50%;"/>
    </div>
  </div>
</template>

<script>
import ChangeTheme from '../../theme/theme.js'
export default {
  data () {
    return {
      theme: 'biyi-normal',
      browserKernel: '',
      canFullScreen: false,
      isFullScreen: false,
      themeConfig: {
        'biyi-blue': {
          name: 'biyi-blue',
          biyiPrimary: '#378DFD',
          biyiHover: '#E7F7FF',
          biyiSelect: '#2166CB',
          biyiThead: '#ebf7ff',
          biyiSecondMenu: '#2E79E8'
        },
        'biyi-light': {
          name: 'biyi-light',
          biyiPrimary: '#ffffff',
          biyiHover: '#E7F7FF',
          biyiSelect: '#E7F7FF',
          biyiFont: '#000000',
          biyiThead: '#ebf7ff',
          biyiSecondMenu: '#ffffff'
        },
        'biyi-dark': {
          name: 'biyi-dark',
          biyiPrimary: '#242525',
          biyiHover: '#113545',
          biyiSelect: '#113545',
          biyiFont: '#E5E0D8D9',
          biyiWhole: '#242525', // 路由页面整体色 深色
          biyiThead: '#2A2C2C',
          biyiBorder: 'rgb(62, 65, 65)',
          biyiActive: '#4097e7',
          biyiNone: 'rgba(62, 65, 65, 0)',
          biyiSecondMenu: '#242525',
          biyiLight: '#2B2D2B', // 路由页面整体色 浅色
          biyiLightHover: '#272827',
          biyiOpacity: 0.2
        }
      },
      themeGroup: [
        {
          id: 'biyi-normal',
          name: '默认'
        },
        {
          name: '雅蓝',
          id: 'biyi-blue'
        },
        {
          name: '暗黑',
          id: 'biyi-dark'
        },
        {
          name: '高亮',
          id: 'biyi-light'
        }
      ]
    }
  },
  props: {
    currentPath: {
      type: Array,
      default: () => ['导入xlsx']
    },
    shrink: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    userName () {
      if (this.$store.state.user.userInfo !== null) {
        return `${this.$store.state.user.userInfo.name}`
      } else {
        return ''
      }
    },
    homeUrl () {
      return require('@/assets/home.png')
    },
    avatorUrl () {
      if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.imgPath) {
        return this.$store.state.user.userInfo.imgPath
      } else {
        return require('@/assets/header.png')
      }
    },
    styles () {
      return {
        transform: this.shrink ? 'rotate(90deg)' : 'rotate(0deg)',
        transition: 'all 0.3s ease-in-out'
      }
    }
  },
  methods: {
    to_keshihua () {
      const env = window['$env'] ? window['$env'] : process.env.NODE_ENV
      const url = env === 'development' ? 'http://localhost:28082/' : 'http://180.97.199.233:28082/'
      window.open(url)
    },
    init () {
      this.getUserInfo()
    },
    getUserInfo () {
      this.$http.get('/api/system/cscpCurrentUserDetails').then(response => {
        this.$store.commit('user/setUserInfo', response.data)
      }).catch()
    },
    openSetting () {
      this.isSettingOpened = true
    },
    setLang (lang) {
      this.$i18n.locale = lang
    },
    setTheme (theme) {
      this.theme = theme
      if (theme === 'biyi-normal') {
        let dom = document.querySelector('.biyi-style')
        if (dom) {
          dom.remove()
        }
        localStorage.removeItem('biyi-theme')
        return false
      } else {
        let t = new ChangeTheme(this.themeConfig[theme])
        t.writeStyle()
        localStorage.setItem('biyi-theme', JSON.stringify(this.themeConfig[theme]))
      }
    },
    toggleFullScreen () {
      if (this.canFullScreen) {
        if (this.isFullScreen) {
          // 关闭全屏
          this.exitFullScreen()
          this.isFullScreen = false
        } else {
          // 打开全屏
          this.requestFullScreen(document.body)
          this.isFullScreen = true
        }
      } else {
        this.$Message.warning({
          content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
          duration: 3
        })
      }
    },
    requestFullScreen (element) {
      // 判断各种浏览器，找到正确的方法
      const requestMethod = element.requestFullScreen || // W3C
        element.webkitRequestFullScreen || // Chrome, safari
        element.mozRequestFullScreen || // FireFox
        element.msRequestFullscreen // IE11
      if (requestMethod) {
        requestMethod.call(element)
      }
    },
    exitFullScreen () {
      var exitMethod = document.exitFullscreen || // W3C
        document.mozCancelFullScreen || // FireFox
        document.webkitExitFullscreen || // Chrome等
        document.msExitFullscreen // IE11
      if (exitMethod) {
        exitMethod.call(document)
      }
    },
    addFullScreenListener () {
      const self = this
      document.onkeydown = function (e) {
        if (e && e.keyCode === 122) { // 捕捉F11键盘动作
          e.preventDefault() // 阻止F11默认动作
          self.toggleFullScreen()
        }
      }
      // 监听不同浏览器的全屏事件，并件执行相应的代码
      switch (self.browserKernel) {
        case 'webkit':
          document.onwebkitfullscreenchange = function () {
            if (document.webkitIsFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'gecko':
          document.onmozfullscreenchange = function () {
            if (document.mozFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'trident':
          document.onmsfullscreenchange = function () {
            if (document.msFullscreenElement) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'others':
          document.onfullscreenchange = function () {
            if (document.fullscreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        default:
          break
      }
    },
    handleUserAction (action) {
      switch (action) {
        case 'logout':
          this.logOutApi()
          break
        case 'userCenter':
          this.$router.push({ name: 'self-edit' })
          break
        default:
          break
      }
    },
    // 退出登录
    logOutApi () {
      window.location.href = 'http://180.97.199.233:28081/#/login'
      // let url = '/api/system/thirdAuth/tianyi/logout'
      // this.$util.http.get(url, { params: { url: window.location.origin } }).then(res => {
      //   console.log(res.data)
      //   let a = document.createElement('a')
      //   a.setAttribute('href', res.data)
      //   document.body.appendChild(a)
      //   a.style.display = 'none'
      //   a.click()
      //   document.body.removeChild(a)
      //   this.$router.push('/login')
      // }).catch(err => {
      //   console.log(new Error('function getTargetComponent error!'))
      //   console.log(err)
      // })
    },
    toggleShrink () {
      this.$emit('toggleShrink')
    }
  },
  created () {
    this.init()
    // 检查浏览器是否支持全屏
    this.canFullScreen = document.fullscreenEnabled ||
      document.webkitFullscreenEnabled ||
      document.mozFullScreenEnabled ||
      document.msFullscreenEnabled
    if (document.webkitFullscreenEnabled) {
      this.browserKernel = 'webkit'
    } else if (document.mozFullScreenEnabled) {
      this.browserKernel = 'gecko'
    } else if (document.msFullscreenEnabled) {
      this.browserKernel = 'trident'
    } else if (document.fullscreenEnabled) {
      this.browserKernel = 'others'
    }
    if (this.canFullScreen) {
      this.addFullScreenListener()
    }
  },
  mounted () {
    let theme = JSON.parse(localStorage.getItem('biyi-theme'))
    if (theme) {
      this.$nextTick(() => {
        this.theme = theme.name
      })
      let t = new ChangeTheme(theme)
      t.writeStyle()
    }
  },
  destroyed () {
    document.onkeydown = null
    switch (this.browserKernel) {
      case 'webkit':
        document.onwebkitfullscreenchange = null
        break
      case 'gecko':
        document.onmozfullscreenchange = null
        break
      case 'trident':
        document.onmsfullscreenchange = null
        break
      case 'others':
        document.onfullscreenchange = null
        break
      default:
        break
    }
  }
}
</script>
